<template>
    <div>
        <table>
            <tr>
                <td>客诉信息：</td>
                <td>
                    <el-date-picker
                        type="datetime"
                        placeholder="开始日期"
                        v-model="ks.from">
                    </el-date-picker>
                </td>
                <td>
                    <el-date-picker
                        type="datetime"
                        placeholder="截止日期"
                        v-model="ks.to">
                    </el-date-picker>
                </td>
                <td>
                    <el-select v-model="ks.status">
                        <el-option
                        v-for="item in ks.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </td>
                <td>
                    <el-button @click="ksexcel">导出excel</el-button>
                </td>
            </tr>
        </table>
        <div id="ksmssage" :style="{width: '500px', height: '300px'}"></div>
        <hr>
        <table>
            <tr>
                <td>口罩信息：</td>
                <td>
                    <el-date-picker
                        type="datetime"
                        placeholder="开始日期"
                        format="yyyy-MM-dd HH:mm:ss"
                        v-model="kzsale.stime">
                    </el-date-picker>
                </td>
                <td>
                    <el-date-picker
                        type="datetime"
                        placeholder="截止日期"
                        format="yyyy-MM-dd HH:mm:ss"
                        v-model="kzsale.etime">
                    </el-date-picker>
                </td>
                <td>
                    <el-select v-model="kzsale.systemcode">
                        <el-option
                        v-for="item in kzsale.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </td>
                <td>
                    <el-select v-model="kzsale.sku">
                        <el-option
                        v-for="item in kzsale.skuoptions"
                        :key="item.sku"
                        :label="item.title"
                        :value="item.sku">
                        </el-option>
                    </el-select>
                </td>
                <td>
                    <el-button @click="kzExcel">导出excel</el-button>
                </td>
            </tr>
        </table>
        <!-- <div id="kzmssage" :style="{width: '500px', height: '300px'}"></div> -->
        <hr>
        <table>
            <tr>
                <td>财务信息：</td>
                <td>
                    日期 <input v-model="finance.datestr" placeholder="20200201">
                </td>
                <td>
                    <select v-model="finance.remark" >
                        <option value="kzorder">口罩</option>
                        <option value="停车付款单">停车</option>
                    </select>
                </td>
                <td>
                    <el-button @click="drawFinacemessage()">查询</el-button>
                </td>
            </tr>
        </table>
        <div id="financemssage" :style="{width: '700px', height: '400px'}"></div>
    </div>
</template>

<script>
    import  {ksstatus,finaceWjnshStatus,downloadKsExcel,getAllProducts,downloadKzExcel} from '@/api/kz/kzapi.js'

    export default {
        data () {
            return {
                baseurl : "http://booking-o01.usite.online", 
                ks:{
                    from : "" ,
                    to : "" , 
                    status: "",
                    options: [
                            {
                                value: '1',
                                label: '处理完毕'
                            }, 
                            {
                                value: '-1',
                                label: '已处理,未完毕'
                            }, 
                            {
                                value: '0',
                                label: '未处理'
                            }, 
                            {
                                value: '-2',
                                label: '作废'
                            }, 
                            {
                                value: '-3',
                                label: '补发'
                            }, 
                            {
                                value: '3',
                                label: '退款'
                            }
                        ]
                },
                kzsale:{
                    stime : "" ,
                    etime : "" , 
                    systemcode : "",
                    sku : "" ,
                    options: [
                            {
                                value: 'PERSONAL',
                                label: '个人口罩'
                            }, 
                            {
                                value: 'COMPANY',
                                label: '企业口罩'
                            },
                            {
                                value: 'STUDENT',
                                label: '学生口罩'
                            }
                        ],
                    skuoptions: [
                            
                        ]
                },
                ydata : [],
                finance : {
                    datestr         : "" ,
                    remark          : "kzorder"
                }
            }
        },
        mounted(){
            this.drawKsmssage();
            this.drawFinacemessage();
            getAllProducts().then((response)=>{
                    this.kzsale.skuoptions = response.data ;
                }).catch((error)=>{
                    console.log(error);
                })

            
        },
        methods: {
            drawKsmssage(){
                // 基于准备好的dom，初始化echarts实例
                this.ksmssage = this.$echarts.init(document.getElementById('ksmssage'));

                ksstatus().then((response)=>{
                   var  ydata  = response.data;
                   // 绘制图表
                    this.ksmssage.setOption({
                        title: { text: '客诉信息处理状态' },
                        tooltip: {},
                        xAxis: {
                            data: ["已处理","处理，未完毕","退款","作废","已撤销","未处理","补发"],
                            axisLabel: {  
                                interval:0,  
                                rotate:40  
                            } 
                        },
                        yAxis: {},
                        series: [{
                            name: '数量',
                            type: 'bar',
                            data: ydata,
                            label: {
                                normal : {
                                    show : true,
                                }
                            }
                        }]
                    });
                }).catch((error)=>{
                    console.log(error);
                })
            },
            drawFinacemessage(){
                // 基于准备好的dom，初始化echarts实例
                this.financemssage = this.$echarts.init(document.getElementById('financemssage'));

                finaceWjnshStatus(this.finance).then((response)=>{
                   var  financeydata  = response.data;
                   // 绘制图表
                    this.financemssage.setOption({
                        title: { text: '农商行财务信息（单位-分）' },
                        tooltip: {},
                        xAxis: {
                            data: ["付款","退款"],
                            axisLabel: {  
                                interval:0,  
                                rotate:40  
                            } 
                        },
                        yAxis: {},
                        series: [{
                            name: '数量',
                            type: 'bar',
                            data: financeydata,
                            label: {
                                normal : {
                                    show : true,
                                }
                            }
                        }]
                    });
                }).catch((error)=>{
                    console.log(error);
                })
            },
            ksexcel(){          // 客诉excel
                var startTime = this.formartdate(this.ks.from);
                var endTime = this.formartdate(this.ks.to);
                var status = this.ks.status;
                if(startTime == "-" || endTime == "-" || status == undefined || status ==null){
                    this.$message("请填写日期信息和选择状态");
                }else{
                    //var url = this.baseurl+"/api/v1/excels/ks?from="+startTime+"&to="+endTime+"&passwd="+password;
                   // window.open(encodeURI(url))
                    var data = {
                        from : startTime,
                        to : endTime ,
                        status : status
                    };
                    downloadKsExcel(data).then(response => {
                            if (response.headers['content-type'].indexOf('json') === -1) {// 返回的数据不是
                                this.download(response.data);
                            }else{
                                if (response.request.responseType === 'arraybuffer' && response.data.toString() === '[object ArrayBuffer]') {
                                    // 返回的数据是 arraybuffer，内容是 json
                                    var text = Buffer.from(response.data).toString('utf8');
                                    var json = JSON.parse(text);
                                    if("N" == json.code){
                                        this.$Message.error({
                                            content:json.message,
                                            duration:2
                                        });
                                    } 
                                }
                            }
                        }).catch((error) => {

                        })

                }
               
            },
            download (data) {
                if (!data) {
                    return;
                }
                let url = window.URL.createObjectURL(new Blob([data]))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', "客诉信息.xls")
                document.body.appendChild(link)
                link.click()
            },
            kzExcel(){    // 个人excel
                var startTime = this.formartdate(this.kzsale.stime);
                var endTime = this.formartdate(this.kzsale.etime);
                var systemcode = this.kzsale.systemcode;
                var sku = this.kzsale.sku;
                if(startTime == "-" || endTime == "-" || systemcode == "" || sku == "" ){
                    this.$message("请填写日期信息/销售类型/产品类型");
                }else{
                     var data = {
                        sdate : startTime,
                        edate : endTime ,
                        systemcode : systemcode,
                        sku : sku 
                    };
                    downloadKzExcel(data).then(response => {
                            if (response.headers['content-type'].indexOf('json') === -1) {// 返回的数据不是
                                this.downloadKz(response.data);
                            }else{
                                if (response.request.responseType === 'arraybuffer' && response.data.toString() === '[object ArrayBuffer]') {
                                    // 返回的数据是 arraybuffer，内容是 json
                                    var text = Buffer.from(response.data).toString('utf8');
                                    var json = JSON.parse(text);
                                    if("N" == json.code){
                                        this.$Message.error({
                                            content:json.message,
                                            duration:2
                                        });
                                    } 
                                }
                            }
                        }).catch((error) => {

                        })
                }

            },
            downloadKz(data) {
                if (!data) {
                    return;
                }
                let url = window.URL.createObjectURL(new Blob([data]))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', this.kzsale.systemcode+"口罩信息"+this.formartdate(this.kzsale.stime)+this.formartdate(this.kzsale.etime)+".xls")
                document.body.appendChild(link)
                link.click()
            },
            companyexcel(){     // 企业excel
                var startTime = this.formartdate(this.companystime);
                var endTime = this.formartdate(this.companyetime);
                var password = this.companypassword;
                if(startTime == "-" || endTime == "-" ){
                    this.$message("请填写日期信息");
                }else{
                    var url = this.baseurl+"/api/v1/excels/company?from="+startTime+"&to="+endTime+"&passwd="+password;
                    window.open(encodeURI(url))
                }
            },
            formartdate(date){
                if(date!=null && date!=""){
                    var time = "";
                    time += date.getFullYear()+"-";  // 获取完整的年份(4位,1970)
                    time += this.doubleTime(date.getMonth()+1) +"-";  // 获取月份(0-11,0代表1月,用的时候记得加上1)
                    time += this.doubleTime(date.getDate())+" ";  // 获取日(1-31)数)
                    time += this.doubleTime(date.getHours())+":";  // 获取小时数(0-23)
                    time += this.doubleTime(date.getMinutes())+":";  // 获取分钟数(0-59)
                    time += this.doubleTime(date.getSeconds());  // 获取秒数(0-59)
                    console.log(time);
                    return time;
                }else{
                    return "-";
                }
               
            },
            doubleTime(value){
                if(value<10){
                    return  "0"+value;
                }
                return  ""+value;
            }
        }
    }
</script>